<template>
<view class="df flexJsa xiding tabNav">
	<view class="tab-item" v-for="item of list" :key="item.value" :class="item.value == navActive?'active':''" @click="navChange(item.value,item)">
		{{item.label}}
	</view>
</view>
</template>

<script>
export default {
	name:"tab-nav",
	props:{
		navs:{
			type:Array,
			default:()=>[]
		},
		active:{
			type:String,
			default:()=> null
		}
	},
	data() {
		return {
			navActive:this.active,
			list:[],
		};
	},
	methods:{
		navChange(val,row){
			this.navActive = val
			this.$emit('update:active',val)
			this.$emit('navChange',val,row)
		}
	},
	watch:{
		navs:{
			handler(vals){
				this.list = []
				for(let item of vals){
					if(item.value && item.label){
						this.list.push(item)
					}else{
						this.list.push({value:item,label:item})
					}
				}
				// 如果没有:sync.active传进来，设置默认值
				if(this.navActive == null && this.list.length > 0){
					this.navActive = this.list[0].value
				}
			},
			immediate:true,
		},
		active(val){
					this.navActive = this.active
		}
		
	}
}
</script>

<style scoped lang="scss">
.xiding{
	  position: sticky;
	  top: 0;
	  z-index: 999;
}
.tabNav{
	font-size: 28rpx;
	height: 70rpx;
	background-color: #FFFFFF;
	.tab-item{
		padding: 15rpx  0;
	}
	.active{
		color: $uni-color-primary;
		border-bottom: 2px solid $uni-color-error;
	}
}
</style>
